<template>
  <div class="container" :style="{ width: isCollapse ? '4%' : '12%' }">
    <el-scrollbar class="scrollbar">
      <el-menu
        :collapse="isCollapse"
        :default-active="activeMenu"
        background-color="pink"
        text-color="#fff"
        active-text-color="#409EFF"
        class="menu"
        router
      >
        <div v-for="(item, index) in routes" :key="index">
          <el-submenu
            v-if="
              item.children && item.children.length > 1 && item.path != '/mine'
            "
            :index="item.path"
            popper-append-to-body
          >
            <template slot="title">
              <i :class="item.meta.icon"></i>
              <span>{{ item.meta.title }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.name"
              :route="child.path"
              :index="child.path"
            >
              <i :class="child.meta.icon"></i>
              <span slot="title">{{ child.meta.title }}</span></el-menu-item
            >
          </el-submenu>
          <el-menu-item
            v-if="
              item.children &&
              item.children.length === 1 &&
              item.path != '/mine'
            "
            :route="formatPath(item)"
            :index="formatPath(item)"
          >
            <i :class="item.children[0].meta.icon"></i>
            <span slot="title">{{ item.children[0].meta.title }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "Sidebar",

  computed: {
    //获取路由对象数据来渲染菜单
    routes() {
      console.log(this.$router.options.routes, "///////");
      return this.$router.options.routes;
    },
    //当前打开的菜单--返回的是选择的菜单的路由路径
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    //菜单栏是否折叠
    isCollapse() {
      return this.$store.state.menuCollapse;
    },
  },
  methods: {
    //格式化组装好正确path
    formatPath(item) {
      // console.log(item, "////");
      if (item.children) {
        if (item.path === "/") {
          return item.path + item.children[0].path;
        } else {
          return item.path + "/" + item.children[0].path;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: pink;
  transition: 0.6s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  .menu {
    width: 100%;
    border-right: none;
  }
}
</style>
<style>
.scrollbar {
  height: calc(100vh - 80px);
  transition: 0.6s;
}
/* 不展示水平滚动条 */
.is-horizontal {
  display: none;
}
.el-menu-item i,
.el-submenu__title i {
  color: #fff;
}
.el-menu-item:hover,
.el-menu-item:focus {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.el-submenu__title:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
</style>

